<template>
	<div class="page">
		<u-navbar>
			<view class="slot-wrap">
				<u-search placeholder="订单编号" v-model="searchForm.orderSn" @search="load" @custom="load"></u-search>
			</view>
		</u-navbar>
		<div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
			<div class="drop-list-tab">
				<u-tabs :list="list" active-color="#333" :current="current" @change="changeTabs"></u-tabs>
			</div>
			<div class="drop-list-config" @click="handleClickScreen">
				<div>
					筛选
				</div>
			</div>
		</div>

		<div class="global-list" v-if="complainData.length != 0">
			<div class="global-item" @click="handleClickSales(item)" v-for="(item,index) in complainData" :key="index">

				<div class="flex global-top-col">
					<div class="global-sn">{{item.orderSn}}</div>
					<div class="global-orderStatus">{{item.complainTopic}}</div>
				</div>
				<!-- 商品信息 -->
				<div class="flex goods-item">
					<div>
						<u-image width="150" height="150" :src="item.goodsImage" mode="" />
					</div>
					<div class="wes-2 goods-name">{{item.goodsName}}</div>

					<div class="flex goods-right-col">
						<div>{{item.complainStatus | complainStatusList}}</div>
					</div>
				</div>

				<div class="global-bottom-col flex">
					<div class="global-createTime">{{item.createTime}}</div>
					<div class="global-clientType">用户：{{item.memberName}}</div>

				</div>

			</div>
		</div>

		<popup memberName goodsName ref="popup" @callback="screened" />

	</div>
</template>

<script>
	import {
		getComplainPage
	} from "@/api/order";
	import popup from "@/components/m-popup/index";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			popup,
		},
		watch: {
			current(index) {
				this.searchForm.status = this.list[index].value;
				this.load();
			},
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				complainData: [], //投诉列表
				current: 0,
				searchForm: {
					// 搜索框初始化对象
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "createTime", // 默认排序字段
					order: "desc", // 默认排序方式
					status: "",
				},
				list: [{
						name: "全部",
						value: "",
					},
					{
						name: "新投诉",
						value: "NEW",
					},
					{
						name: "已撤销",
						value: "CANCEL",
					},
					{
						name: "待申诉",
						value: "WAIT_APPEAL",
					},
					{
						name: "对话中",
						value: "COMMUNICATION",
					},
					{
						name: "等待仲裁",
						value: "WAIT_ARBITRATION",
					},
					{
						name: "已完成",
						value: "COMPLETE",
					},
				],
			};
		},

		methods: {
			onShow() {
				this.complainData = [];
				this.searchForm.pageNumber = 1;
				this.init();
			},
			onReachBottom() {
				this.searchForm.pageNumber++;
				this.init();
			},
			// 点击订单
			handleClickSales(val) {
				uni.navigateTo({
					url: `/pages/order/complaint/detail?id=${val.id}`,
				});
			},
			// 筛选回调
			screened(val) {
				/**
				 * 1.循环出相同的字段进行赋值
				 * 2.将不同的字段进行赋值
				 */
				for (let key in val) {
					this.searchForm[key] != undefined ?
						(this.searchForm[key] = val[key]) :
						"";
				}
				this.load();
			},

			// 点击筛选
			handleClickScreen() {
				this.$refs.popup.open();
			},
			changeTabs(index) {
				this.current = index;
			},

			load() {
				this.searchForm.pageNumber = 1;
				this.complainData = [];
				this.init();
			},
			async init() {
				uni.showLoading({
					title: "加载中",
				});

				//商品订单
				let res = await getComplainPage(this.searchForm);
				if (res.data.success) {
					this.complainData.push(...res.data.result.records);
				}

				uni.hideLoading();
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/components/global.scss";

	.global-bottom-col {
		margin: 0;
	}

	.global-createTime {
		margin: 10rpx 0;
	}

	.drop-list-tab {
		overflow: hidden;
		flex: 4 !important;
	}

	.drop-list-config {
		flex: 1;
		padding-bottom: 10rpx;
	}

	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}
</style>
